<template>
    <div>
      <a-card :bordered="false" v-if="processData.length>0">
        <a-button type="primary" icon="setting" @click="configCommonlyUsed">设置常用流程</a-button>
        <desform-card
          v-if="getProcessSettings.length"
          title="常用流程"
          :grids="getProcessSettings"
          @handClick="handClick"
        ></desform-card>
        <template v-for="(items,index) in getProcessDataByBusinessPlate">
          <desform-card
            :title="filterDictTextByCache(index)"
            :grids="items"
            @handClick="handClick"
            :key="index"
          ></desform-card>
        </template>
        <a-card title="online表单" class="card">
          <a-card-grid @click="handleOnlineClick" style="height:78px;text-align:center;">
            <span>online表单测试</span>
          </a-card-grid>
        </a-card>
        <a-modal
          title="设置常用流程"
          :width="800"
          :visible="visible"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <template v-for="(items,index) in getProcessDataByBusinessPlate">
            <a-card :title="filterDictTextByCache(index)" class="card" :headStyle="headStyle" :key="index" >
              <a-checkbox-group v-model="checkedValues[index]" style="width: 100%;">
                <a-row>
                  <template v-for="(item,index) in items">
                    <a-col :key="index" :span="6">
                      <a-checkbox :value="item.key">{{item.name}}</a-checkbox>
                    </a-col>
                  </template>
                </a-row>
              </a-checkbox-group>
            </a-card>
          </template>
        </a-modal>
        <a-modal
          :title="kfbTitle"
          :width="800"
          :visible="desformApplyVisible"
          @ok="desformApplyHandleOk"
          @cancel="desformApplyHandleCancel"
        >
          <k-form-build  ref="kfb" :value="kfdJsonData" />
        </a-modal>
      </a-card>
      <a-card :bordered="false" v-else>
        <h2 style="text-align: center;">未查询到可以申请的工单</h2>
      </a-card>
      <!-- online表单区域 -->
      <onl-cgform-auto-modal ref="modal" :code="code" />
    </div>
</template>

<script>
import Vue from 'vue'
import { getAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import desformCard from './components/desformCard'
import { getFormByModelId, saveOrUpdate } from '@/api/process'
export default {
  name: 'BpmAutoDesformApply',
  components: {
    desformCard
  },
  mixins: [],
  computed: {
    getProcessSettings() {
      var list = []
      var that = this
      this.processData.forEach(function(item, i) {
        const data = that.processSettings[item.businessPlate]
        if (data && data.indexOf(item.key) >= 0) {
          list.push(item)
        }
      })
      return list
    },
    getProcessDataByBusinessPlate() {
      var list = {}
      this.processData.forEach(function(item, i) {
        if (!list[item.businessPlate]) {
          list[item.businessPlate] = []
        }
        list[item.businessPlate].push(item)
      })
      return list
    }
  },
  data() {
    return {
      headStyle: {
        backgroundColor: 'rgb(234, 234, 234)'
      },
      visible: false,
      url: {
        list: '/activiti/models/listAll'
      },
      processData: [],
      checkedValues: {}, // 工单按业务分组，设置的常用时用业务分类做key值
      processSettings: {},
      desformApplyVisible: false,
      kfbTitle: '',
      kfdJsonData: {},
      modelId: '',
      formId: '',
      code: '30cafb214f2245aabdd5d31d169deefd'
    }
  },
  created() {
    var key = this.$route.name + ':processSettings'
    this.processSettings = Vue.ls.get(key) || {}
  },
  methods: {
    configCommonlyUsed() {
      this.checkedValues = this.processSettings
      this.visible = true
    },
    handleOk() {
      this.visible = false
      var key = this.$route.name + ':processSettings'
      Vue.ls.set(key, this.checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.processSettings = this.checkedValues
    },
    handleCancel() {
      this.visible = false
    },
    handClick(item) {
      getFormByModelId({ modelId: item.id }).then((res) => { // 查询已有表单设计器
        if (res.success) {
          if (!res.result) {
            return this.$message.warning('该工单未设计表单')
          }
          this.modelId = item.id
          this.formId = res.result.id
          this.kfbTitle = '表单【' + item.name + '】发起申请'
          this.kfdJsonData = JSON.parse(res.result.htmlJson)
          this.desformApplyVisible = true
        } else {
          this.$message.warning(res.message)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    desformApplyHandleCancel() {
      this.desformApplyVisible = false
    },
    async desformApplyHandleOk() {
      try {
        const formData = await this.$refs.kfb.getData()
        const res = await saveOrUpdate({
          modelId: this.modelId,
          formId: this.formId,
          formData: JSON.stringify(formData)
        })
        if (res.success) {
          this.desformApplyVisible = false
          this.$message.success('保存成功')
        } else {
          this.$message.warning(res.message)
        }
      } catch (err) {
        console.log(err)
      }
    },
    filterDictTextByCache(text) {
      return filterDictTextByCache('business_sector', text)
    },
    handleOnlineClick() {
      this.$refs.modal.add('4')
    }
  },
  mounted() {
    getAction(this.url.list).then((res) => { // 查询已有流程
      if (res.success) {
        this.processData = res.result
      } else {
        this.$message.warning(res.message)
      }
    }).catch((error) => {
      console.log(error)
    })
  }
}
</script>

